<template>
  <el-dialog v-model="visible" :title="title" :before-close="onVisable" :draggable="true" :width="750">
    <el-form ref="formRef" :model="dataForm" :rules="ruleList" label-width="110px">
      <div class="flex-sc warp ww100">
        <!-- 主键 -->
        <el-form-item label="主键" class="ww100" v-if="props.state.editKey&&title=='修改'">
          <el-input size="large" v-model="dataForm[props.state.key]" placeholder="请输入" :disabled="true"/>
        </el-form-item>
        <el-form-item label="名称" class="ww100">
          <el-input size="large" v-model="dataForm.name" placeholder="请输入" />
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="large" type="info" @click="onVisable">取 消</el-button>
        <el-button size="large" type="primary" @click.stop="handleSubmit(formRef)">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
  import api from '../api'
  const store = useStore()
  const { proxy } = getCurrentInstance()
  let visible = $ref(false)
  let title = $ref('')
  let dataForm = $ref({})
  let formRef = ref()
  let ruleList= $ref({
    name: [{ required: true, message: '请输入', trigger:['blur','change'] }],
  })
  const props = defineProps({
    state: {
      type: [Object, Array],
      default: ()=>{return {}}
    },
  })
  // 打开关闭弹窗
  const onVisable = async (val) => {
    visible = !visible
    if (!visible) return
    title = val && val.hasOwnProperty(props.state.key)? '修改':'新增'
    dataForm = Object.assign({}, title == '修改'? val : {})
  }
  // 提交
  const handleSubmit = (formEl) => {
    formEl.validate(valid => {
      if (valid) {
        let editFrom = Object.assign({}, dataForm)
        console.log('editFrom', editFrom)
      }
    })
  }
  // 暴露给父组件
  defineExpose({
    onVisable
  })
</script>

<style scoped lang="scss">

</style>
